var User_Form = function () {
    var MultiSelect = function () {
        $('#user_multi_select').multiSelect({
            selectableHeader: "<h4>Danh Sách Gốc</h4>",
            selectionHeader: "<h4>Danh Sách Sẽ Được Cập Nhật</h4>",
            selectableOptgroup: true
        });        
    }
    
    var FormWinzard = function() {
        // default form wizard
        var form_wizard = $('#form_wizard');
        
        form_wizard.bootstrapWizard({
            'nextSelector': '.button-next',
            'previousSelector': '.button-previous',
            onTabClick: function (tab, navigation, index) {
                return false;
            },
            onNext: function (tab, navigation, index) {
                if (index == 1 ) {
                    
                    $('#user_multi_select').html('').multiSelect("refresh");
                    
                    $.ajax({
                        url: $('#form-1').attr('action'),
                        type: $('#form-1').attr('method'),
                        data: $('#form-1').serialize(),
                        dataType: 'json'
                    })
                    .done(function(response) {
                        $('#ms-user_multi_select').remove();
                        $('#user_multi_select').html( tmpl('user-tmpl', response.data.users) ).multiSelect("refresh");
                
                        if ($(response.data.users).length) {
                            form_wizard.find('a[id^="modal_ajax_update_"]').show();
                        }
                    });
                }
                
                var total = navigation.find('li').length;
                var current = index + 1;
                                    
                jQuery('li', form_wizard).removeClass("done");
                
                var li_list = navigation.find('li');
                for (var i = 0; i < index; i++) {
                    jQuery(li_list[i]).addClass("done");
                }

                if (current >= total) {
                    form_wizard.find('.button-next').hide();
                    form_wizard.find('.button-previous').show();
                } else {
                    form_wizard.find('.button-next').show();
                    form_wizard.find('.button-previous').hide();
                }
                
                App.scrollTo($('.breadcrumb'));
            },
            onPrevious: function (tab, navigation, index) {
                var total = navigation.find('li').length;
                var current = index + 1;
                
                jQuery('li', form_wizard).removeClass("done");
                
                var li_list = navigation.find('li');
                for (var i = 0; i < index; i++) {
                    jQuery(li_list[i]).addClass("done");
                }

                if (current >= total) {
                    form_wizard.find('.button-next').hide();
                    form_wizard.find('.button-previous').show();
                } else {
                    form_wizard.find('.button-next').show();
                    form_wizard.find('.button-previous').hide();
                }
                
                form_wizard.find('a[id^="modal_ajax_update_"]').hide();
                
                App.scrollTo($('.breadcrumb'));
            },
            onTabShow: function (tab, navigation, index) {
                var total = navigation.find('li').length;
                var current = index + 1;
                var $percent = (current / total) * 100;
                form_wizard.find('.process-bar').css({
                    width: $percent + '%'
                });
            }
        })
        .find('.form-actions .btn:not(.button-next)').hide();
    }

    return {
        init: function () {
            
            $.fn.modalmanager.defaults.resize = true;
            $.fn.modalmanager.defaults.spinner = '<div class="loading-spinner fade" style="width: 200px; margin-left: -100px;"><img src="assets/img/ajax-modal-loading.gif" align="middle">&nbsp;<span style="font-weight:300; color: #eee; font-size: 18px; font-family:Open Sans;">&nbsp;Đang tải...</span></div>';

            $.datepicker.regional['vn'] = {
                monthNamesShort: ['Tháng 1','Tháng 2','Tháng 3','Tháng 4','Tháng 5','Tháng 6','Tháng 7','Tháng 8','Tháng 9','Tháng 10','Tháng 11','Tháng 12'],
                dayNamesMin: ['Hai','Ba','Tư','Năm','Sáu','Bảy','CN'],
                dateFormat : 'dd-mm-yy',
                changeMonth: true,
                changeYear: true
            };
        
            $.datepicker.setDefaults($.datepicker.regional['vn']);
            
            FormWinzard();
            MultiSelect();
            
            var $modal = $('#ajax-modal');
 
            $('#modal_ajax_update_eucharist_date').on('click', function(){
                // create the backdrop and wait for next modal to be triggered
                $('body').modalmanager('loading');

                $modal.load('user_update_eucharist_date_modal.php', $('#form-2').serialize(), function(){
                    $modal.modal().on("hidden", function() {
                        $modal.empty();
                    });
                });
            });
 
            $('#modal_ajax_update_confirmation_date').on('click', function(){
                // create the backdrop and wait for next modal to be triggered
                $('body').modalmanager('loading');

                $modal.load('user_update_confirmation_date_modal.php', $('#form-2').serialize(), function(){
                    $modal.modal().on("hidden", function() {
                        $modal.empty();
                    });
                });
            });
 
            $('#modal_ajax_update_new_class').on('click', function(){
                // create the backdrop and wait for next modal to be triggered
                $('body').modalmanager('loading');

                $modal.load('user_update_new_class_modal.php', $('#form-2').serialize(), function(){
                    $modal.modal().on("hidden", function() {
                        $modal.empty();
                    });
                });
            });
            
            $('select#usertype').change(function () {

                if ($(this).val() == 'THIEU_NHI') {
                    $('select[name="category_team"]').find('option[value=""]').hide();
                }
                else {
                    $('select[name="category_team"]').find('option[value=""]').show();
                }
                $('select[name="category_team"]').trigger('change');
            }).trigger('change');
        }
    };
}();